selector{
propiedad: valor;
}<h1>Mi primer titulo editado en CSS</h1>
<h2 class="titulo-h2">Mi primer h2 con CSS</h2>
<h2 id="id-h2">Otro titulo h2</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing </p>
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing </p>
</div>/* Selector Universal */
* {
color: blue;
}
/* Selector de tipo (h1, parrafos, botones, inputs, etc */
h1 {
color: red;
}
p {
color:aqua;
}
/* Selector por clases */
.titulo-h2{
color:bisque;
}
/* Selector por ID */
#id-h2{
background-color: red;
}
/* Selector por atributo, en este caso el atributo es creado */
[rancio="siRancio"]{
color: white;
background-color: blue;
}
/* Por descendiente*/
/* en este ejemplo seleccionamos a los elementos
p que estan dentro de un div */
div p{
color:brown;
}
/*en este ejemplo seleccionamos a los p que estan dentro de un div
pero son de la clase=parrafoEspecial
Nota: para las clases se pone el elemento que contien a la clase y luego
la clase, o simplemente la clase*/
div p.parrafoEspecial{
color:black;
}
/* Selector por pseudoClases, como active, hover. Eventos de las selecciones */
p:hover{
background-color:red;
color: black;
} La especificidad es la manera mediante la cual los navegadores deciden qué valores de una propiedad CSS son más relevantes para un elemento y, por lo tanto, serán aplicados. La especificidad está basada en las reglas de coincidencia que están compuestas por diferentes tipos de selectores CSS.más info. El orden de mayor a menor importancia:
elementos y los pseudo-elementos.
Nota: los pseudo elementos se reconocen porque van precedidos de dos(2) :: y las pseudo-clases solo de uno (1) :
/* Ejemplo de como usar el !important */
.titulo-h2{
color: black;
background-color:red;
}
h2 {
color:yellow;
background-color:aqua !important;
}
/* El estilo de clase tiene mayor rango que la de
elemento, pero al usar el !important, el estilo que
domina es este. */Modificador de Bloques de Elementos (del ingles Block Element Modifier BEM).BEM es una metodología que usaremos para nombrar y clasificar selectores CSS de manera estricta, transparente e informativa. más info
Más informacion en mozilla developer: más info
| Unidad | Nombre | Equivale a. |
|---|---|---|
| cm | Centímetros | 1cm = 96px/2,54 |
| mm | Milímetros | 1mm = 1/10 de 1cm |
| Q | Cuartos de milímetros | 1Q = 1/40 de 1cm |
| in | Pulgada | 1in = 2,54cm = 96px |
| pc | Picas | 1pc = 1/16 de 1in |
| pt | Puntos | 1pt = 1/72 de 1in |
| px | Píxeles | 1px = 1/96 de 1in |
1 em por defecto es 16px
| Unidad | Relativa a |
|---|---|
| em | Tamaño de letra del elemento padre, en el caso de propiedades tipográficas como font-size, y tamaño de la fuente del propio elemento en el caso de otras propiedades, como width. |
| ex | Altura x de la fuente del elemento. |
| ch | La medida de avance (ancho) del glifo "0" de la letra del elemento. |
| rem | Tamaño de la letra del elemento raíz. |
| lh | Altura de la línea del elemento. |
| vw | 1% del ancho de la ventana gráfica. |
| vh | 1% de la altura de la ventana gráfica. |
| vmin | 1% de la dimensión más pequeña de la ventana gráfica. |
| vmax | 1% de la dimensión más grande de la ventana gráfica. |
.contact-form__h1 {
/* aqui 1 em es de 20px que es
el tamaño que viene de la caja contenedora */
/* tamaño */
font-size: 2em;
/* Tipo de letras */
font-family: Georgia;
/* Lo que ocupa la caja que contiene la letra, a lo alto */
line-height: 1.5;
/* El grosor de cada letra */
font-weight: 400;
}Para más detalle u otras opciones en más info
Para incluir tipografia diferentes se puede usar las de google. En la cabecera del HTML se incluye la tipografia y en CSS se llama a la seleccionada.
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Redressed&display=swap" rel="stylesheet">font-family: 'Redressed', cursive;Nota: Utilizando la propiedad display se utiliza para cambiar el comportamiento, por ejemplo:
h2 {
display: inline;
height: 400px; /* A los elementos en linea no se aplica height */Es la distancia entre el texto y el borde de la caja, es una propiedad resumida, es decir, puedo resumir:
padding: 10px 20px 30px 40px;
/* top=10px derecha=20px
abajo= 30px e izquierda= 40px */box-sizing: content-box;
Aqui el tamaño de la caja se ve afectado por el padding, margin y border.
h3 {
background-color:red;
display:inline-block; /* Inline, pero acepta las propiedades block */
padding: 10px 50px;
height:100px;
width:100px;
box-sizing:content-box;
/* aqui el ancho de la caja son 100px del widht + 50px de padding
derecha + 50px padding izquierda => total de 200px*/
}box-sizing: border-box;
Del ejemplo anterio si utilizamos la opcion de border-box, la caja va a mantener el valor del width y no le suma los padding.
Más información aqui
/* Sintaxis:
/* Keyword values */
box-shadow: none;
/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;
/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;
/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
/* Global keywords */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;Es igual que el border, pero no es real, no ocupa espacio en el DOM. Es un shorthand, aqui más info.
/* style */
outline: solid;
/* color | style */
outline: #f66 dashed;
/* style | width */
outline: inset thick;
/* color | style | width */
outline: green solid 3px;Se utiliza para posicionar objetos en el DOM, y al posicionar el objeto adquiere cuatro (4) propiedades: Top, Right, left, botton y el Z-Index. más info
Es el valor por defecto y se considera que no esta posicionada.
Se posiciona pero conserva su espacio en el DOM. Nota: Las propiedades TOP y LEFT son las más importantes y dominan a las otras dos (2)
Ordena los elementos en el eje Z, que es el eje de profundidad de la pantalla. A mayor el número mas adelante se muestra.
Nota: La recomendación es colocar los Z-Index es de 50 en 50 para poder ajustar elementos en medio, es decir, dar espacio para ajustar luego de crearlos.
La unica forma del que el hijo este abajo del padre, es que tenga z-index:-1 y el padre no tener z-index.
.contenedor{
width:300px;
height:300px;
background:blue;
margin: 80px;
position: relative;
}
.hijo {
background:orange;
width:120px;
height:120px;
position: relative;
top: -20px;
left: -20px;
z-index: -1;
}Con el position absolute no reserva el espacio y el punto de referencia que se mueve es el contenedor o el viewport...En el relative, era desde su posicion inicial.
Nota: Al tener el absolute, el tamaño de la caja se ajusta al contenido, aunque el elemento sea block.
Toma de referencia el view port, a menos que el contenedor este posicionado y ahi, si se puede hacer referencia absoluta respecto al contenedor.
Igual que el absolute, pero se queda fijado. Utilizado para la publicidad, que queda fija pero lo demas cambia.
Es una mezcla entre relative y el fixed. Se reserva el espacio en el DOM y se define en que momento va ha estar fijo
Cuando un texto sobrepasa al contenedor, el overflow es la propiedad para tratar estos casos.
Esta propiedad es un shorthand, para más info de los valores, ejemplos y propiedades CSS relacionadas.
Es una propiedad de CSS que ubica un elemento al lado izquierdo o derecho de su contenedor, permitiendo a los elementos de texto y en linea aparecer a su costado. El elemento es removido del normal flujo de la pagina, aunque aún sigue siendo parte del flujo.
En la actualidad se utiliza para colocar texto de envuelva a la imagen, utilizado para articulos y blogs, para más info
Son elementos que no forman parre del DOM, pero si se ven los resultados, igual que el outline. Para más info y son elementos inline:
NOTA: Los pseudo-elementos que tienen la propiedad content no forman parte del DOM, como por ejemplo ::after y ::before, entonces no pueden ser seleccionadas.
Una pseudoclase CSS es una palabra clave que se añade a los selectores y que especifica un estado especial del elemento seleccionado. Por ejemplo, :hover aplicará un estilo cuando el usuario haga hover sobre el elemento especificado por el selector. Para más info y algunas pseudo-clases son:
* :hover.
* :link. Cambia las propiedades de un link que no hemos visitado.
* :visited. Cambia las propiedades de un link que ya hemos visitado.
* :lang()
La propiedad object-fit indoca como el contenido de un elemento externo, por ejemplo una imagen o un video, deberia redimensionarse para ajustarse a su contenedor...más info de los posibles valores:
* Contain.
* Cover.
* Fill.
* one.
* Scale-down.
La propiedad object-position determina el alineamiento del elemento dentro de la caja.
/* left - Right - Top - Button */
object-position: 10px;
/* Puede ser px - em - % - etc */La propiedad CSS:cursor especifica el tipo de cursor que se mostrara cuando este se encuentre sobre un elemento. Para ver los posibles valores más info.
Hay varias formas de indicar los colores:
* Por el nombre. El navegador interpreta el color y coloca el color, pero hay diferencias entre navegadores.
* RGB (Red-Rojo, Green-Verde, Blue-Azul). Las medidas van del cero(0) al 255, cero(0) es nada y 255 lo maximo.
/* Negro */
background: rgb(0,0,0);
/* Blanco */
background: rgb(255,255,255);
/* Rojo + Verde = Amarillo una excepsion */
background: rgb(255,255,0);
/* Negro */
background: rgb(0,0,0,.2);
/* Blanco */
background: rgb(255,255,255,.3);
/* Rojo + Verde = Amarillo una excepsion */
background: rgb(255,255,0,.5);
Puede estar en base a 3 digitos, por ejemplo: #000 seria el minimo o negro y #fff seria el blanco.
Puede estar en base a 6 digitos, por ejmplo:
#000000 seria negro y #ffffff blanco y #ff0000 rojo puro.
Es adaptar la paguina a diferentes resoluciones, lo recomendado es hacer las paguinas Firts Mobile, es decir, diseñar primero para moviles y luego para mayores tamaños.
El Módulo de Caja Flexible, comúnmente llamado flexbox, fue diseñado como un modelo unidimensional de layout, y como un método que pueda ayudar a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación
El flexbox tiene dos ejes:
El contenedor flex: Un área del documento que contiene un flexbox es llamada contendedor flex. Para crear un contenedor flex, establecemos la propiedad del área del contenedor display como flex o inline-flex. Tan pronto como hacemos esto, los hijos directos de este contenedor se vuelven ítems flex. Las propiedades del contenedor flex son:
* flex-direction.
* flex-wrap.
* flex-flow. Es un shorthand de flex-direction y flex-wrap.
La propiedad CSS flex-direction especifica cómo colocar los objetos flexibles en el contenedor flexible definiendo el eje principal y la dirección (normal o al revés). Valores:
* row. Valor por defecto y muestra los elementos en fila, comenzando de izquierda a derecha.
* row-reverse. Muestra los elementos en fila, pero empezando de derecha a izquierda.
* column. Muestra los elementos en columna de arriba hacia abajo.
* column-recerse. La dirección es de abajo hacia arriba.
La propiedad flex-wrap de CSS especifica si los elementos "hijos" son obligados a permanecer en una misma línea o pueden fluir en varias líneas. Si la cobertura (wrap) está permitida, esta propiedad también te permite controlar la dirección en la cual serán apilados los elementos. Valores:
* nowrap. Valor por defecto.
* wrap.
* wrap-reverse.
Nota: Si le doy un widht:100%, los elementos se comportan como bloque.
Nota: Utlizando la propiedad min-width controlo el ancho minimo del contenedor.
Los flex-box tienen propiedades que controlan la alineación de las cajas y sus contenidos, y estas son:
justify-content. Controla la alineación de todos los elementos en el eje principal.. Valores:
align-items. Controla la alineación de todos los elementos en el eje transversal. Posibles valores:
align-content. Descrito en la especificación como para "empaquetar líneas flexibles"; Controla el espacio entre las líneas de flexión en el eje transversal.
La propiedad flex es un shorthand y son propiedades de los item flexibles. Hasta ahora hemos visto las propiedades del contenedor: más info
Reparte el espacio que sobra del contenedor y los reparte entre los los flex items si se lo asignamos a todos los item o podemos asignarle esta propiedad a un solo elemento.
Es como la propiedad width, pero es más importante, le da prioridad al flex-basis.
La propiedad CSS flex-shrink especifica el factor de contracción de un flex item.
Es como el Z-index, pero en el eje que apunta el main axis.
Lucas hace una practica de crear un formulario utilizando flex-box. En esta guía, más Info , se muestran algunos de los casos de uso comunes de flexbox, en aquellos lugares donde tiene más sentido que otro método de diseño.